<template>
  <div style="height: 100%;cursor: pointer;" @click="clickItem">
    <div style="margin-top: 10px;">
      <div style="display: flex;align-items: center ;justify-content: center;width: 100%;"
        :style="{height:height+'px'}" class="menu_item_text">
        <div class="menu_text">{{ title }}</div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    title: String,
    name: String,
    height: {
      default: 60,
    },
  },
  data() {
    return {};
  },
  methods: {
    clickItem() {
      this.$emit('menuClick', this.name);
    },
  },
  mounted() {},
};
</script>
<style scoped>
.menu_text {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
}

.menu_item_text {
  background: url('~assets/bg_menu_item.png') no-repeat;
  background-size: 100% 100%;
  /* height: calc(100% - 10px); */
  width: 100%;
}
</style>